<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item :label="customTranslate('Element documentation')">
            <a-textarea v-model="documentation" :placeholder="customTranslate('Element documentation')" allow-clear />
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'documentation',
    props: ["element"],
    data() {
        return {
            documentation: "",
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        this.documentation = this.element?.businessObject?.documentation ? this.element?.businessObject?.documentation[0].text : ''
    },
    watch: {
        documentation: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));

                if (!newVal) {
                    modeling.updateProperties(toRaw(this.element), { 'documentation': [] })
                    return
                }

                const moddle = toRaw(this.bpmnModeler.get('moddle'))
                const documentationElement = moddle.create('bpmn:Documentation', { text: newVal })
                modeling.updateProperties(toRaw(this.element), { 'documentation': [documentationElement] })
            },
        }
    },
}
</script>

<style lang="scss" scoped>

</style>